<!DOCTYPE html>
<html>

<p id="demo">一个段落222</p>
<button id="btn1" type="button">点击1</button>

<div id="dv1">
    <p id="p1">我是冒泡</p>
</div>

<div id="dv2">
    <p id="p2">我是捕获</p>
</div>

<head>
<!--meta charset="utf-8"-->
</head>

<body>
    <!--meta charset="utf-8"-->
</body>

<p id="p3">pppp3</p>
<button id="btn2" type="button" onclick="stopp3()">停止p3 mousemove</button>

<script>
//不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"
//默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递

//冒泡:内部元素的事件会先被触发，然后再触发外部元素 
document.getElementById("dv1").addEventListener("click", function(){
    alert("点击 dv1")
}, false)
document.getElementById("p1").addEventListener("click", function(){
    alert("点击 ip1")
}, false)

//捕获则相反
document.getElementById("dv2").addEventListener("click", function(){
    alert("点击 dv2")
}, true)
document.getElementById("p2").addEventListener("click", function(){
    alert("点击 ip2")
}, true)

document.getElementById("p3").addEventListener("mousemove", p3mouse)
function p3mouse() {
    this.innerHTML = Math.random()
}
function stopp3() {
    document.getElementById("p3").removeEventListener("mousemove", p3mouse)
}

//
document.getElementById("btn1").addEventListener("click", function btn1() {
    //this.innerHTML = "一个段落333"
    document.getElementById("demo").innerHTML = "一个段落333"
})

//尝试重置浏览器的窗口触发 "resize" 事件句柄
window.addEventListener("resize", function () {
    document.getElementById("demo").innerHTML = Math.random()
})

</script>

</html>
